<template>
  <div class="canvas-wrapper draw-polygons">
    <!--用来和鼠标进行交互操作的canvas-->
    <canvas
      class="canvas-dom"
      @mousemove="drawPolygonsIns.MouseMove"
      @mousedown="drawPolygonsIns.clickPoint"
      @mouseup="drawPolygonsIns.stopDragging"
      :width="canvasWidth"
      :height="canvasHeight"
      ref="can"
    ></canvas>
    <!--存储已生成的点线，避免被清空-->
    <canvas
      class="canvasSave-dom"
      :width="canvasWidth"
      :height="canvasHeight"
      ref="canSave"
    ></canvas>
  </div>
</template>
<script setup>
import { onUnmounted, ref, watchEffect } from "vue";
import { Polygons } from "@/components/drawComp/drawBase";
const can = ref(null);
const canSave = ref(null);
const props = defineProps({
  // 画布尺寸
  canvasWidth: {
    type: [Number, String],
    default: 1000,
  },
  canvasHeight: {
    type: [Number, String],
    default: 600,
  },
  // 底图尺寸
  imageWidth: {
    type: Number,
    default: null,
  },
  imageHeight: {
    type: Number,
    default: null,
  },
  // 底图分辨率尺寸
  naturalWidth: {
    type: Number,
    default: null,
  },
  naturalHeight: {
    type: Number,
    default: null,
  },
  // 多边形
  polygons: {
    type: Array,
    default: null,
  },
  // 可编辑
  editable: {
    type: Boolean,
    default: false,
  },
  // 保存点数据项是不是对象结构
  pointItemIsObj: {
    type: Boolean,
    default: false,
  },
  // 是否可撤销（没实现
  withdrawAble: {
    type: Boolean,
    default: false,
  },
  // 是否判断当前绘制点线和其他线段交叉
  judgePointIsIntersect: {
    type: Boolean,
    default: false,
  },
  // 是否判断当前绘制图形和其他图形重叠了（没实现
  judgeIsOverlapping: {
    type: Boolean,
    default: false,
  },
  // 判断点击点的容错距离，越大越容易点到实心点
  faultTolerant: {
    type: Number,
    default: 5,
  },
});
const emits = defineEmits(["pointIsIntersect", "rectIsOverlapping"]);
const drawPolygonsIns = new Polygons(props, {
  emits,
});
watchEffect(() => {
  drawPolygonsIns.initDom(can.value, canSave.value);
});
onUnmounted(drawPolygonsIns?.unMountedCb);

defineExpose({
  ClickClear: drawPolygonsIns.ClickClear,
  ClickReset: drawPolygonsIns.ClickReset,
  ClickPut: drawPolygonsIns.ClickPut,
  ClickDraw: drawPolygonsIns.ClickDraw,
  ClickDrawLine: drawPolygonsIns.ClickDrawLine,
  DeletePrevious: drawPolygonsIns.DeletePrevious,
  drawFullScreen: drawPolygonsIns.drawFullScreen,
  drawPolygons: drawPolygonsIns.drawPolygons,
  deleteFullScreen: drawPolygonsIns.deleteFullScreen,
  disabledDraw: drawPolygonsIns.disabledDraw,
  judgeIsFullScreen: drawPolygonsIns.judgeIsFullScreen,
  init: drawPolygonsIns.init,
});
</script>
<style lang="scss" scoped>
.canvas-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  > canvas {
    // border: 2px solid transparent;
    display: block;
  }
  .borderRed {
    // border: 2px solid #ff3d3d;
    box-shadow: 0 0 0 2px #ff3d3d inset;
  }
  .canvas-dom {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: crosshair;
  }

  .canvasSave-dom {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .img {
    width: 100%;
    height: 100%;
  }
}
</style>
